<template>
    <div>
        <el-divider content-position='left'>
            <el-popover
                ref='popover'
                placement="bottom-start"
                width="500"
                trigger="click"
                @hide='resetPopover'>
                <el-form label-width="120px">
                    <el-form-item label='触发关键词'>
                        <el-input v-model='createForm.keyword'></el-input>
                    </el-form-item>
                    <el-form-item label='自动回复类型'>
                        <el-select v-model="createForm.type">
                            <el-option label='默认回复' value='default'></el-option>
                            <el-option label='关键词回复' value='keyword'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='自动回复内容' >
                        <el-input v-model='createForm.reply_content'></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type='primary' @click='createConfirm'>确认</el-button>
                    </el-form-item>
                </el-form>
                <el-button type='primary' slot='reference' >添加自动回复</el-button>
            </el-popover>
        </el-divider>
        <el-table
            v-if='config'
            :data="config[0].value"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column prop='title' label='关键词'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='keyword' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column label='回复类型' prop='type_name'>
                <template v-slot='scope'>
                    {{scope.row.type == 'default' ? '默认回复' : '关键词回复'}}
                </template>
            </el-table-column>
            <el-table-column prop='router' label='回复内容'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='reply_content' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-popconfirm title="确认删除吗？" @confirm='deleteHandle(scope.row)' class="popconfirm">
                        <el-button type='text' slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {toast, alert} from '@u'
    import { nanoid } from 'nanoid';
    export default {
        data () {
            return {
                tableData : [],
                config : null,
                createForm : {
                    keyword : null, //关键词
                    type : null,//回复类型
                    reply_content : null, //回复内容
                }
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
            getTableData () {
                this.__api.common.getFromConfigByGroup({
                    group : 'WECHAT_AUTO'
                }).then(res => {
                    if (!res[0].value) {
                        res[0].value = []
                    } else {
                        res[0].value = JSON.parse(res[0].value)
                    }
                    this.config = res;
                })
            },
            //删除
            deleteHandle (row) {
                this.config[0].value = this.config[0].value.filter(item => item._renderId != row._renderId);
                this.saveConfig();
            },
            //更新
            updateHandle (row) {
                this.$nextTick(_ => {
                    this.config[0].value = this.config[0].value.map(v => {
                        if (v._renderId == row._renderId) {
                            v = {
                                ...row
                            }
                        }
                        return v
                    });
                    this.saveConfig();
                })
            },
            //创建确认
            createConfirm () {
                if (!this.createForm.keyword) {
                    toast('请填写关键词', 'error');
                    return;
                }
                if (!this.createForm.type) {
                    toast('请选择回复类型', 'error');
                    return;
                }
                if (!this.createForm.reply_content) {
                    toast('请填写自动回复内容', 'error');
                    return;
                }
                this.config[0].value = [...this.config[0].value, {
                    ...this.createForm,
                    _renderId : nanoid()
                }]
                this.$refs.popover.doClose();
                this.resetPopover();
                this.saveConfig();
            },
            //重置相关数据
            resetPopover () {
                this.createForm = {
                    keyword : null, //关键词
                    type : null,//回复类型
                    reply_content : null, //回复内容
                }
            },
            saveConfig () {
                let params = JSON.parse(JSON.stringify(this.config));
                params[0].value = JSON.stringify(params[0].value);
                this.__api.common.groupFormUpdate(params).then(_ => {
					toast('操作成功');
				})
            }
        }
    }
</script>

<style>

</style>